﻿
@{
    ViewBag.Title = "Chat Bot";
}

<h2>Chat Bot</h2>

<h3 class="center" id="headline"><a href="https://wit.ai/" target="_blank">ChatBot</a> Demonstration</h3>

<div class="botchat-history">
    <div class="botchat-turn">
        <div class="botchat-right">
            <span class="botchat-timestamp">6:32:49 PM</span>
            <div class="botchat-bubble botchat-user" >How are you?</div>
        </div>
        <div class="botchat-left">
            <span class="botchat-timestamp" >6:32:55 PM</span>
            <div class="botchat-bubble">Good!</div>
        </div>
    </div>
    <hr />
    <div class="botchat-bottom">
        <div class="public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="false" style="outline:none;white-space:pre-wrap;word-wrap:break-word;" data-reactid=".1.2.2.0.2.0.$editor0.0">
            <div data-contents="true" data-reactid=".1.2.2.0.2.0.$editor0.0.0"></div>
            
        </div>
        <div class="botchat-buttons">
            <a class="botchat-send">Send</a>
        </div>
    </div>
</div>

@section script{
<script>
    $(function () {
        var showTime = function (time) {
            return time.toLocaleTimeString()
        }
        var appendUserMsg = function (text, left) {
            var botchatUser = $('<div class=""><span class="botchat-timestamp">' + showTime(new Date()) + '</span><div class="botchat-bubble" >' + text + '</div></div>')
            botchatUser.addClass(left == true ? "botchat-left" : "botchat-right");
            if (!(left == true)) {
                botchatUser.find(".botchat-bubble").addClass("botchat-user")
            }
            $(".botchat-turn").append(botchatUser);
        }

        var sessionId = "@Guid.NewGuid().ToString("N")";

        $(".botchat-buttons .botchat-send").click(function () {
            var text = $(".public-DraftEditor-content").text().trim();
            appendUserMsg(text, false);
            $(".public-DraftEditor-content").text("");
            $.ajax({
                url: '@Url.Action("Post")',
                data: {
                    q: text,
                    sessionId: sessionId,
                    data:''
                },
                dataType:'JSON',
                type: 'POST',
                success: function (response) {
                    console.log("success!");
                    console.log(response);
                    $(response).each(function () {
                        appendUserMsg(this, true);
                    });
                }
            });
        });
    })
</script>
}
